<template>
  <div class="login-container">
    <div class="login_bgr"></div>
    <div class="login-form">
      <h1>登录</h1>
      <el-card>
        <el-form ref="loginRef" :model="loginFormData" :rules="loginFormRules">
          <el-form-item label="手机号" prop="mobile"> <el-input v-model="loginFormData.mobile" placeholder="请输入手机号"></el-input></el-form-item>
          <el-form-item label-width="53px" prop="password" label="密码"> <el-input v-model="loginFormData.password" placeholder="请输入密码"></el-input></el-form-item>
          <el-form-item>
            <el-checkbox v-model="isAgree" label="记住密码" size="large"> </el-checkbox>
          </el-form-item>
          <el-form-item> <el-button type="primary" style="width: 100%" @click="loginBtn"> 立即登录 </el-button></el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import useUserStoreHook from "@/store/modules/user/index.ts";
import { localCache } from "@/utils/cache";
import { storeToRefs } from "pinia";
import { CACHE_MOBILE, CACHE_PASSWORD } from "@/global/constants";

const router = useRouter();

const isAgree = ref(true);
// 区分开发环境和生产环境，如果是开发环境则自动填充手机号和密码
// const loginFormData = reactive({
//   mobile: import.meta.env.VITE_NODE_ENV === "development" ? "13800000002" : "",
//   password: import.meta.env.VITE_NODE_ENV === "development" ? "hm#qd@23!" : "",
// });

const loginFormData = reactive({
  mobile: localCache.getCache(CACHE_MOBILE) || "13800000002",
  password: localCache.getCache(CACHE_PASSWORD) || "hm#qd@23!",
});

const loginFormRules = reactive({
  mobile: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    { min: 11, max: 11, message: "长度在 11 个字符", trigger: "blur" },
    { pattern: /^1[3456789]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
    { pattern: /^\d+$/, message: "手机号格式不正确", trigger: "blur" },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

// 获取用户仓库实例
const userStore = useUserStoreHook();

// 登录表单校验
const loginRef = ref();
// 登录按钮点击事件
const loginBtn = () => {
  //登录表单校验
  loginRef.value.validate(async (valid) => {
    if (valid) {
      // 登录请求
      await userStore.UserloginAction({ ...loginFormData });
      //提示消息
      ElMessage.success("登录成功");
      // 跳转到首页
      router.push("/");
      // 是否记住密码
      // 如果记住密码框勾选，则将手机号和密码保存到本地缓存中，下次登录时自动填充
      if (isAgree.value) {
        localCache.setCache(CACHE_MOBILE, loginFormData.mobile);
        localCache.setCache(CACHE_PASSWORD, loginFormData.password);
      } else {
        // 如果不勾选则清除缓存在本地的账号和密码
        localCache.deleteCache(CACHE_MOBILE);
        localCache.deleteCache(CACHE_PASSWORD);
      }
    } else {
      // 登录表单校验不通过提示信息
      // throw new Error("登录失败，请检查输入信息");
      ElMessage.error("登录失败，请检查输入信息");
      // 阻止表单提交
      return false;
    }
  });
};
</script>
<style lang="scss" scoped>
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .login_bgr {
    flex: 3;
    background: url(@/assets/common/login_back.png) no-repeat center / cover;
    border-radius: 0 60px 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding: auto;
  }

  .login-form {
    flex: 2;
    background-color: #fff;
    border-radius: 60px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 100px;
    .el-card {
      border: none;
      padding: 0;
    }
    h1 {
      margin-bottom: 20px;
      font-size: 44px;
      font-weight: 400;
    }

    .el-input {
      width: 300px;
      height: 44px;
    }
  }
}
</style>
